<template>
  <div class="screen-container">
    <!-- 顶部标题栏 -->
    <header class="screen-header">
      <div class="header-left">
        <span class="dot"></span>
        <span class="system-name">综合监控中心</span>
      </div>

      <div class="header-center">
        <h1 class="title">数据可视化大屏</h1>
        <div class="title-light"></div>
      </div>

      <div class="header-right">
        <span class="time">{{ currentTime }}</span>
        <button class="fullscreen-btn" @click="toggleFullScreen">
          {{ isFullscreen ? '退出全屏' : '全屏显示' }}
        </button>
        <button class="refresh-btn" @click="forceRefreshCharts">刷新图表</button>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="screen-main" ref="mainContent">
      <div class="panel" :key="'panel-' + refreshKey + '-0'"><ChartLine /></div>
      <div class="panel" :key="'panel-' + refreshKey + '-1'"><ChartPie /></div>
      <div class="panel" :key="'panel-' + refreshKey + '-2'"><ChartRadar /></div>
      <!-- <div class="panel" :key="'panel-' + refreshKey + '-3'"><Chart3DWorld /></div> -->
      <div class="panel" :key="'panel-' + refreshKey + '-4'"><ChartRegressionAnalysis /></div>
      <div class="panel" :key="'panel-' + refreshKey + '-5'"><ScatterChart /></div>
    </main>

    <!-- 底部栏 -->
    <footer class="screen-footer">
      <div class="footer-content">© 2025 数据可视化中心 | 状态：<span class="ok">运行正常</span></div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, provide } from 'vue'
import ChartLine from '@/components/ChartLine.vue'
import ChartPie from '@/components/ChartPie.vue'
import ChartRadar from '@/components/ChartRadar.vue'
import Chart3DWorld from '@/components/Chart3DWorld.vue'
import ChartRegressionAnalysis from '@/components/ChartRegressionAnalysis.vue'
import ScatterChart from '@/components/ScatterChart.vue'

const currentTime = ref('')
const isFullscreen = ref(false)
const mainContent = ref(null)
const refreshKey = ref(0)
const resizeObserver = ref(null)

// 提供响应式屏幕尺寸给所有子组件
const screenSize = ref({
  width: window.innerWidth,
  height: window.innerHeight,
  isMobile: window.innerWidth <= 768,
  isTablet: window.innerWidth > 768 && window.innerWidth <= 1024,
  isDesktop: window.innerWidth > 1024
})

provide('screenSize', screenSize)

const updateTime = () => {
  const now = new Date()
  const pad = n => (n < 10 ? '0' + n : n)
  currentTime.value = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
}

// 强制刷新所有图表
const forceRefreshCharts = () => {
  refreshKey.value += 1
  console.log('强制刷新图表，key:', refreshKey.value)
}

// 处理窗口大小变化
const handleResize = () => {
  clearTimeout(window.resizeTimer)
  window.resizeTimer = setTimeout(() => {
    // 更新屏幕尺寸信息
    screenSize.value = {
      width: window.innerWidth,
      height: window.innerHeight,
      isMobile: window.innerWidth <= 768,
      isTablet: window.innerWidth > 768 && window.innerWidth <= 1024,
      isDesktop: window.innerWidth > 1024
    }
    
    console.log('屏幕尺寸变化:', screenSize.value)
    
    // 强制刷新图表
    forceRefreshCharts()
  }, 200)
}

// 使用 ResizeObserver 监听容器尺寸变化
const initResizeObserver = () => {
  if (!mainContent.value) return
  
  resizeObserver.value = new ResizeObserver((entries) => {
    for (let entry of entries) {
      const { width, height } = entry.contentRect
      console.log('容器尺寸变化:', { width, height })
      
      // 延迟刷新以确保布局已完成
      setTimeout(() => {
        forceRefreshCharts()
      }, 100)
    }
  })
  
  resizeObserver.value.observe(mainContent.value)
}

const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
  
  // 监听全屏变化
  document.addEventListener('fullscreenchange', () => {
    isFullscreen.value = !!document.fullscreenElement
    // 全屏状态变化时刷新图表
    setTimeout(forceRefreshCharts, 500)
  })
  
  // 初始化 ResizeObserver
  initResizeObserver()
  
  // 初始加载后延迟刷新一次，确保所有图表正确初始化
  setTimeout(forceRefreshCharts, 1000)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  document.removeEventListener('fullscreenchange', () => {})
  clearTimeout(window.resizeTimer)
  
  if (resizeObserver.value) {
    resizeObserver.value.disconnect()
  }
})
</script>

<style scoped>
.screen-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  background: radial-gradient(ellipse at center, #031628 0%, #000814 100%);
  overflow: hidden;
  position: relative;
}

.screen-header {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background: linear-gradient(to right, rgba(0,60,90,0.8), rgba(0,10,40,0.8));
  box-shadow: 0 0 15px rgba(0,255,255,0.4);
  border-bottom: 2px solid rgba(0,255,255,0.3);
  position: relative;
  flex-shrink: 0;
}

.header-center {
  position: relative;
  text-align: center;
}

.title {
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: bold;
  color: #00eaff;
  text-shadow: 0 0 15px #00eaff;
}

.title-light {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00eaff, transparent);
  transform: translateX(-50%);
  animation: lightMove 2s infinite linear;
}

@keyframes lightMove {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

.header-left .dot {
  width: 10px;
  height: 10px;
  background: #00eaff;
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 10px #00eaff;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.time {
  font-size: 16px;
  color: #00eaff;
}

.fullscreen-btn, .refresh-btn {
  border: 1px solid #00eaff;
  background: transparent;
  color: #00eaff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
}
.fullscreen-btn:hover, .refresh-btn:hover {
  background: #00eaff;
  color: #000;
}

.screen-main {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
  overflow: auto;
  min-height: 0; /* 重要：允许内容收缩 */
}

@media (max-width: 1024px) {
  .screen-main {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  
  .header-right {
    gap: 10px;
  }
  
  .fullscreen-btn, .refresh-btn {
    padding: 4px 8px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .screen-main {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    gap: 12px;
    padding: 12px;
  }
  
  .screen-header {
    padding: 0 15px;
    height: 60px;
  }
  
  .title {
    font-size: 18px;
    letter-spacing: 2px;
  }
  
  .time {
    font-size: 14px;
  }
  
  .header-right {
    flex-direction: column;
    gap: 5px;
  }
  
  .fullscreen-btn, .refresh-btn {
    padding: 3px 6px;
    font-size: 11px;
  }
}

.panel {
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  border-radius: 12px;
  background: rgba(0, 10, 30, 0.5);
  padding: 10px;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  overflow: hidden;
}

.screen-footer {
  height: 40px;
  text-align: center;
  font-size: 14px;
  color: #00eaff;
  border-top: 1px solid rgba(0,255,255,0.3);
  background: rgba(0,0,30,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ok {
  color: #00ff9f;
}
</style>